import {Constant, BaseEcharts} from "@/echarts/BaseEcharts";
import dayjs from 'dayjs';

/**
 * 工程师相关的统计
 */
export class DemoChart extends BaseEcharts {

    constructor(dom) {
        super(dom);
        this.type = Constant.TYPE.LINE;
    }

    //****************线性
    _configLineData(raw = []) {
        let xAxis = [];
        let data = [];
        for (let key in raw) {
            xAxis.push(key);
            data.push(raw[key]);
        }
        return {
            xAxis,
            data
        }
    }

    createLine(data) {
        this.option = {
            xAxis: {
                type: 'category',
                data: data.xAxis
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: data.data,
                    type: 'line'
                }
            ]
        };
        this.myChart.setOption(this.option);
        // window.addEventListener("resize", function (ev) {
        //   this.myChart.resize();
        // });
    }


    //****************柱状
    _configBarData(raw = []) {
        let xAxis = [];
        let data = [];
        for (let key in raw) {
            xAxis.push(key);
            data.push(raw[key]);
        }
        return {
            xAxis,
            data
        }
    }

    createBar(data) {
        this.option = {
            xAxis: {
                type: 'category',
                data: data.xAxis
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: data.data,
                    type: 'bar',
                    showBackground: true,
                    backgroundStyle: {
                        color: 'rgba(180, 180, 180, 0.2)'
                    }
                }
            ]
        };
        this.myChart.setOption(this.option);
        // window.addEventListener("resize", function (ev) {
        //   this.myChart.resize();
        // });
    }

    //****************饼状
    _configPieData(raw = []) {
        let data = [];
        for (let key in raw) {
            data.push({
                name: key,
                value: raw[key]
            });
        }
        return data
    }

    createPie(data) {
        this.option = {
            title: {
                text: 'Referer of a Website',
                subtext: 'Fake Data',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left'
            },
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: '50%',
                    data: data,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        this.myChart.setOption(this.option);
        // window.addEventListener("resize", function (ev) {
        //   this.myChart.resize();
        // });
    }

    changeChartType(type) {
        this.create(this.raw, type)
    }

}
